<template>
    <!-- 人员管理-考勤中心-出勤报表 -->
    <div class="empAttend">
        <div class="left">
            <div class="ipt">
                <Input
                    search
                    enter-button
                    placeholder="请输入关键字"
                    style="width: 200px"
                    @on-search="onSearch"
                    @on-enter="onSearch"
                    v-model="groupkeyword"
                    clearable />
            </div>
            <div class="tree">
                <el-tree
                    ref="tree"
                    :data="treeData"
                    @node-click="getTreeId"
                    :default-expanded-keys="[0]"
                    node-key="id"></el-tree>
            </div>
        </div>
        <div class="right">
            <div class="tab">
                <div class="items">
                    <DatePicker
                        type="date"
                        :options="options"
                        placeholder="请选择日期"
                        style="width: 200px"
                        format="yyyy-MM-dd"
                        v-model="day"
                        :clearable="false"
                        @on-change="getDayDate"
                        v-if="activeName == '0'"></DatePicker>
                    <DatePicker
                        type="month"
                        :options="options"
                        placeholder="请选择月份"
                        style="width: 200px"
                        format="yyyy-MM"
                        v-model="months"
                        :clearable="false"
                        @on-change="getMonthDate"
                        v-if="activeName == '1'"></DatePicker>
                </div>
                <el-tabs v-model="activeName">
                    <el-tab-pane
                        label="日考勤记录"
                        name="0">
                        <div class="list">
                            <div class="search">
                                <div class="item1">
                                    <ul class="ulbox">
                                        <li
                                            v-for="(item, index) in attendStateList"
                                            :key="item.id"
                                            :class="item.id == attendState ? 'active' : ''"
                                            @click="getAttendType(item)">
                                            {{ item.name }}({{ numList[index] }})
                                        </li>
                                    </ul>
                                </div>
                                <div class="item1">
                                    <Input
                                        search
                                        enter-button
                                        placeholder="人员姓名、工种搜索"
                                        style="width: 250px"
                                        @on-search="onDaySearch"
                                        @on-enter="onDaySearch"
                                        v-model="dayKeyword"
                                        clearable />
                                    <input
                                        type="password"
                                        autocomplete="new-password"
                                        style="display: none" />
                                </div>
                                <div class="item1">
                                    <el-button
                                        type="primary"
                                        @click="dayExport"
                                        size="small"
                                        plain
                                        style="margin-left: 20px"
                                        >导出</el-button
                                    >
                                </div>
                            </div>
                        </div>
                        <input
                            type="text"
                            class="intBox"
                            style="display: none"
                            clearable />
                        <el-table
                            :data="dayEmpList"
                            :height="tableHeight"
                            :stripe="true">
                            <el-table-column
                                label="序号"
                                width="50px">
                                <template slot-scope="scope">
                                    <span>{{ dayPageNum == 1 ? scope.$index + 1 : (dayPageNum - 1) * dayPageSize + scope.$index + 1 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="empName"
                                label="人员姓名"
                                width="100"></el-table-column>
                            <el-table-column
                                prop="empPhone"
                                label="人员电话"
                                width="120"></el-table-column>
                            <el-table-column
                                prop="groupName"
                                label="班组"></el-table-column>
                            <el-table-column
                                prop="workRoleName"
                                label="工人类型"></el-table-column>
                            <el-table-column
                                prop="workTypeName"
                                label="工种"></el-table-column>
                            <el-table-column
                                prop="startTime"
                                label="首次打卡时间"
                                width="140"></el-table-column>
                            <el-table-column
                                prop="endTime"
                                label="末次打卡时间"
                                width="140"></el-table-column>
                            <el-table-column
                                prop="workTimes"
                                label="出勤时长(H)"
                                width="100"></el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button
                                        @click.native.prevent="record(scope.$index, dayEmpList)"
                                        type="text"
                                        size="small"
                                        >打卡记录</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <div
                            class="clearfix"
                            v-show="dayEmpList.length > 0">
                            <div class="float-right">
                                <Page
                                    v-if="dayTotalCount"
                                    style="margin: 20px 0; text-align: center"
                                    :current.sync="dayCurrent"
                                    :total="dayTotalCount"
                                    :page-size="dayPageSize"
                                    show-elevator
                                    show-total
                                    show-sizer
                                    @on-change="pageChange"
                                    @on-page-size-change="pageSizeChange"></Page>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane
                        label="月考勤记录"
                        name="1">
                        <div class="list">
                            <div class="search">
                                <div class="item1">
                                    <Input
                                        search
                                        enter-button
                                        placeholder="人员姓名、工种搜索"
                                        style="width: 250px"
                                        @on-search="onMonthSearch"
                                        @on-enter="onMonthSearch"
                                        v-model="monthKeyword"
                                        clearable />
                                    <input
                                        type="password"
                                        autocomplete="new-password"
                                        style="display: none" />
                                </div>
                                <div class="item1">
                                    <el-button
                                        type="primary"
                                        @click="downLoad"
                                        size="small"
                                        plain
                                        style="margin-left: 20px"
                                        >全部导出</el-button
                                    >
                                </div>
                            </div>
                        </div>
                        <input
                            type="text"
                            class="intBox"
                            style="display: none" />
                        <div
                            class="table"
                            style="width: 100%; margin: 0px auto; padding-top: 10px">
                            <el-table
                                :data="monthEmpList"
                                :height="tableHeight"
                                :stripe="true">
                                <el-table-column
                                    label="序号"
                                    width="70px">
                                    <template slot-scope="scope">
                                        <span>{{ monthPageNum == 1 ? scope.$index + 1 : (monthPageNum - 1) * monthPageSize + scope.$index + 1 }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="empName"
                                    label="人员姓名"
                                    width="100"></el-table-column>
                                <el-table-column
                                    prop="empPhone"
                                    label="人员电话"
                                    width="150"></el-table-column>
                                <el-table-column
                                    prop="groupName"
                                    label="班组"
                                    width="150"></el-table-column>
                                <el-table-column
                                    prop="attendDays"
                                    label="出勤天数"></el-table-column>
                                <el-table-column
                                    label="出勤时长(h)"
                                    align="center">
                                    <el-table-column
                                        v-for="(item, index) in DateList"
                                        :key="index"
                                        :label="item.substring(5, 10)"
                                        width="70">
                                        <template slot-scope="porps">
                                            <p>{{ porps.row.dateList[index].workTimes }}</p>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div
                            class="clearfix"
                            v-show="monthEmpList.length > 0">
                            <div class="float-right">
                                <Page
                                    v-if="monthTotalCount"
                                    style="margin: 20px 0; text-align: center"
                                    :current.sync="monthCurrent"
                                    :total="monthTotalCount"
                                    :page-size="monthPageSize"
                                    show-elevator
                                    show-total
                                    show-sizer
                                    @on-change="monthPageChange"
                                    @on-page-size-change="monthpageSizeChange"></Page>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <Modal
            v-model="recordModal"
            title="打卡记录"
            width="600px;"
            :mask-closable="false"
            :footer-hide="true">
            <div class="modal_tags">
                <Tabs
                    v-model="tabActiveName"
                    @on-click="getState">
                    <TabPane
                        :label="item.name"
                        :name="String(item.id)"
                        v-for="(item, index) in stateList"
                        :key="index"></TabPane>
                </Tabs>
            </div>
            <div
                class="table"
                style="width: 96%; margin: 20px auto">
                <el-table
                    :data="recordList"
                    style="width: 100%"
                    border>
                    <el-table-column
                        prop="time"
                        label="时间"></el-table-column>
                    <el-table-column
                        prop="state"
                        label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state == 1">进</span>
                            <span v-if="scope.row.state == 0">出</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="名称"></el-table-column>
                </el-table>
            </div>
            <div
                class="clearfix"
                v-show="recordList.length > 0">
                <div class="float-right">
                    <Page
                        v-if="recordTotalCount"
                        style="margin: 20px 0; text-align: right"
                        :current.sync="recordCurrent"
                        :total="recordTotalCount"
                        :page-size="recordPageSize"
                        show-elevator
                        show-total
                        @on-change="getChange"></Page>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import { format, GetallDate, initYMD, formatInItDate } from "@/sever/utils.js"
import { getDayAttend, getMonthAttend, getEmpAttendNum, getAttendMonthExport, getEmpAttendRecord, getAttendDayExport } from "@/api/api.js"
import { GroupCreate } from "@/mixins/group.js"
import moment from "moment"
export default {
    mixins: [GroupCreate],
    data() {
        return {
            tabActiveName: "-1",
            options: {
                disabledDate(date) {
                    return date > Date.now()
                },
            },
            activeName: "0",
            //日考勤记录
            dayCurrent: 1,
            dayPageSize: 10,
            dayPageNum: 1,
            dayTotalCount: "",
            dayKeyword: "",
            //   overViewList:'',
            dayEmpList: [],
            day: format(new Date(), "YYYY-MM-DD"),
            gpsList: [],
            GPSModal: false,
            //月考勤记录
            months: format(new Date(), "YYYY-MM"),
            monthCurrent: 1,
            monthPageSize: 10,
            monthPageNum: 1,
            monthTotalCount: "",
            monthKeyword: "",
            monthEmpList: [],
            dateList: [],
            btnList: [],
            pramsID: "",
            ids: "",
            Flag: true,
            porjectList: [],
            deptId: "",
            monthDeptId: "",
            attendStateList: [
                {
                    id: 2,
                    name: "全部",
                },
                {
                    id: 1,
                    name: "已出勤",
                },
                {
                    id: 0,
                    name: "未出勤",
                },
            ],
            attendState: 2,
            DateList: [],
            empId: "",
            recordDate: "",
            recordCurrent: 1,
            recordPageSize: 10,
            recordPageNum: 1,
            recordTotalCount: "",
            recordList: [],
            stateList: [
                {
                    id: -1,
                    name: "全部",
                },
                {
                    id: 1,
                    name: "进",
                },
                {
                    id: 0,
                    name: "出",
                },
            ],
            state: -1,
            recordModal: false,
            treeGroupId: "",
            corp: "",
            numList: ["", "", ""],
            tableHeight: window.innerHeight - 345,
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId
                this.machs = val.deptId
                this.monthDeptId = val.deptId
                this.dayPageNum = 1
                this.dayCurrent = 1
                this.dayKeyword = ""
                this.day = new Date()
                this.monthPageNum = 1
                this.monthCurrent = 1
                this.monthKeyword = ""
                this.monthDeptid = ""
                this.attendState = 2
                this.months = new Date()
                this.treeGroupId = ""
                this.corp = ""
                this.getDayList()
                this.getMonthList()
                this.getGroupTree()
                this.getNum()
            }
        },
    },
    methods: {
        dayExport() {
            let day = moment(this.day).format("YYYY-MM-DD")
            let params = {
                deptId: this.deptId,
                date: day,
                attendState: this.attendState == 2 ? "" : this.attendState,
                groupId: this.treeGroupId,
                corpId: this.corp,
            }
            getAttendDayExport(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("导出成功")
                        window.open(res.data.path)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getNum() {
            let day = formatInItDate(this.day)
            let params = {
                deptId: this.deptId,
                date: day,
                groupId: this.treeGroupId,
                corpId: this.corp,
                keyword: this.dayKeyword,
            }
            getEmpAttendNum(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.numList = [res.data.empAllNum, res.data.empAttendNum, res.data.empNoAttendNum]
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //获取日考勤
        getDayList() {
            let day = formatInItDate(this.day)
            let params = {
                pageSize: this.dayPageSize,
                pageNum: this.dayPageNum,
                keyword: this.dayKeyword,
                deptId: this.deptId,
                date: day,
                attendState: this.attendState == 2 ? "" : this.attendState,
                groupId: this.treeGroupId,
                corpId: this.corp,
            }
            getDayAttend(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.dayEmpList = res.data.list
                        this.dayEmpList.forEach((i) => {
                            i.startTime = i.startTime ? i.startTime.substring(11, 19) : ""
                            i.endTime = i.endTime ? i.endTime.substring(11, 19) : ""
                        })
                        this.dayTotalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getAttendType(item) {
            this.dayPageNum = 1
            this.dayCurrent = 1
            this.attendState = item.id
            this.getDayList()
        },
        getDayDate(item) {
            this.dayPageNum = 1
            this.dayCurrent = 1
            this.day = item
            this.getDayList()
        },
        onDaySearch() {
            this.dayPageNum = 1
            this.dayCurrent = 1
            this.getDayList()
            this.getNum()
        },
        pageChange(index) {
            this.dayPageNum = index
            this.getDayList()
        },
        pageSizeChange(index) {
            this.dayPageSize = index
            this.getDayList()
        },
        getMonthList() {
            this.dateList = []
            let months = formatInItDate(this.months)
            let params = {
                pageSize: this.monthPageSize,
                pageNum: this.monthPageNum,
                keyword: this.monthKeyword,
                deptId: this.monthDeptId,
                time: months,
                groupId: this.treeGroupId,
                corpId: this.corp,
            }
            getMonthAttend(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.monthEmpList = res.data.list
                        this.monthTotalCount = res.data.total
                        if (this.monthEmpList.length > 0) {
                            for (let i in this.monthEmpList) {
                                for (let j in this.monthEmpList[i].dateList) {
                                    this.monthEmpList[i].dateList = this.getDate(this.monthEmpList[i].dateList)
                                }
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getMonthDate(item) {
            this.monthPageNum = 1
            this.monthCurrent = 1
            this.months = item
            console.log(item)
            this.getMonthList()
            this.getDateList()
        },
        onMonthSearch() {
            this.monthPageNum = 1
            this.monthCurrent = 1
            this.getMonthList()
            this.getDateList()
        },
        getDate(data) {
            let arr = []
            for (let i in data) {
                arr.push(data[i].date)
            }
            for (let j in this.DateList) {
                if (!arr.includes(this.DateList[j])) {
                    data.push({
                        date: this.DateList[j],
                        workTimes: 0,
                    })
                }
            }
            return data
        },
        monthPageChange(index) {
            this.monthPageNum = index
            this.getDateList()
            this.getMonthList()
        },
        monthpageSizeChange(index) {
            this.monthPageSize = index
            this.getDateList()
            this.getMonthList()
        },
        downLoad() {
            let months = formatInItDate(this.months)
            let params = {
                deptId: this.deptId,
                groupId: this.treeGroupId,
                corpId: this.corp,
                keyword: this.monthKeyword,
                month: months,
            }
            getAttendMonthExport(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("导出成功")
                        window.open(res.data.path)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //获取当前所选时间内的日期
        getDateList() {
            let data = formatInItDate(this.months)
            this.DateList = []
            // let data = this.months;
            let mowMonth = new Date().getMonth()
            let year = data.substring(0, 4)
            let month = data.substring(5, 7)
            let count = GetallDate(year, month)
            for (var k = 1; k <= count; k++) {
                var day
                if (k < 10) {
                    day = year + "-" + month + "-" + "0" + k
                } else {
                    day = year + "-" + month + "-" + k
                }
                this.DateList.push(day)
            }
        },
        //打卡记录
        record(index, rows) {
            this.tabActiveName = "-1"
            this.empId = rows[index].empId
            this.recordDate = rows[index].date
            this.recordPageNum = 1
            this.recordCurrent = 1
            this.state = -1
            this.recordModal = true
            this.recordDetails()
        },
        recordDetails() {
            let params = {
                empId: this.empId,
                date: this.recordDate,
                pageNum: this.recordPageNum,
                pageSize: this.recordPageSize,
                state: this.state == -1 ? "" : this.state,
            }
            getEmpAttendRecord(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.recordList = res.data.list
                        this.recordTotalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getChange(index) {
            this.recordPageNum = index
            this.recordDetails()
        },
        getState(item) {
            this.state = item
            this.recordPageNum = 1
            this.recordCurrent = 1
            this.recordDetails()
        },
        //班组树形结构
        getGroupTree() {
            this.getGroupTreeList(this.deptId)
        },
        onSearch() {
            this.getGroupTree()
        },
        getTreeId(index) {
            if (index.id === 0) {
                this.corp = ""
                this.treeGroupId = ""
            } else {
                if (index.children) {
                    this.corp = index.id
                    this.treeGroupId = ""
                } else {
                    this.treeGroupId = index.id
                    this.corp = ""
                }
            }
            this.monthPageNum = 1
            this.monthCurrent = 1
            this.dayCurrent = 1
            this.dayPageNum = 1
            this.getNum()
            this.getMonthList()
            this.getDayList()
        },
    },
    beforeDestroy() {
        if (localStorage.getItem("logTime")) {
            localStorage.removeItem("logTime")
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId
        this.machs = this.$store.state.porjectObject.deptId
        this.monthDeptId = this.$store.state.porjectObject.deptId
        if (localStorage.getItem("logTime")) {
            this.day = initYMD(JSON.parse(localStorage.getItem("logTime")))
        }
        this.getDayList()
        this.getNum()
        this.getMonthList()
        this.getDateList()
        this.getGroupTree()
        this.btnList = JSON.parse(localStorage.getItem("arr"))
        this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(0)
        })
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
.empAttend {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: #f5f5f5;
    .left {
        width: 250px;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        .ipt {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #bfbfbf;
        }
        .tree {
            width: 250px;
            margin: 0 auto;
            margin-top: 20px;
            height: calc(100% - 100px);
            overflow-y: scroll;
        }
        .tree::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        .tree {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        .tree {
            -ms-overflow-style: none;
        }
    }
    .right {
        // flex: 1;
        width: calc(100% - 260px);
        margin-left: 10px;
        .tab {
            width: 100%;
            padding: 10px 20px;
            height: 100%;
            border-radius: 10px;
            position: relative;
            background: #fff;
            .list {
                width: 100%;
                margin-bottom: 10px;
                .search {
                    width: 100%;
                    margin: 0 auto;
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 5px;
                    .item1 {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-right: 20px;
                        .ulbox {
                            width: auto;
                            height: 32px;
                            list-style: none;
                            display: flex;
                            justify-content: flex-start;
                            border-radius: 20px;
                            li {
                                height: 32px;
                                line-height: 32px;
                                text-align: center;
                                color: var(--themeColor);
                                font-size: 14px;
                                border: 1px solid var(--themeColor);
                                cursor: pointer;
                                padding: 0 15px;
                                box-sizing: border-box;
                            }
                            .active {
                                background: var(--themeColor);
                                color: #ffffff;
                            }
                            li:first-child {
                                border-radius: 20px 0px 0px 20px;
                                border-right: none;
                            }
                            li:last-child {
                                border-radius: 0px 20px 20px 0px;
                                border-left: none;
                            }
                        }
                    }
                }
            }
            .items {
                position: absolute;
                right: 20px;
                top: 10px;
                z-index: 100;
            }
        }
    }
}
.modal_tags {
    width: 96%;
    margin: 0 auto;
    ul {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        list-style: none;
        align-items: center;
        li {
            margin-right: 10px;
        }
    }
}
/deep/.ivu-input-group {
    border-radius: 20px;
}
/deep/.ivu-input-group .ivu-input {
    border-radius: 20px 0 0 20px;
    border-color: #ebf2f8;
    background: #ebf2f8;
}
/deep/.ivu-input-group-append {
    border-radius: 0 20px 20px 0;
    // background:#1891FF!important;
}
/deep/.el-tag.el-tag--success {
    background-color: #e7f8f2;
    border-color: #28d79c;
    color: #3fcf77;
}
/deep/.el-tag {
    border-radius: 2px;
}
/deep/.ivu-select-selection {
    border-radius: 2px;
}
</style>
